<template>
	<div id="loginPage">
		<div class="header">
			<div class="div_left"><img src="../../static/img/logo-2.png" /></div>

		</div>
		<div class="main" :style="'background-image: url(' + bgurl + ')'">
			<div class="login_box">
				<div class="title">让支付和收款更简单</div>
				<div class="sec1">
					<span>极速</span>
					<span>便捷</span>
					<span>安全</span>
					<span>稳定</span>
				</div>

				<div class="div_form">
					<div class="input_box">
						<i class="iconfont icon-seeusero username_icon"></i>
						<input style="display:none">
						<input type="text" v-model="form.username" placeholder="用户名" @keydown.enter="login" autocomplete="off" /></div>
					<div class="input_box">
						<i class="iconfont icon-password password_icon"></i>
						<input type="password" name="password1" style="display:none" />
						<input type="hidden">
						<input type="text" v-model="form.password" placeholder="密码" @keydown.enter="login" onfocus="this.type='password'" /></div>
          <div style="font-size: 12px;text-align: right;padding-right: 10px"><router-link to="/system/backPwd">忘记密码?</router-link></div>
					<div><button class="login" @click="login">安全登录</button></div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import bgurl from '../../static/img/login.jpg'
	import md5 from 'md5'
	export default {
		data() {
			return {
				form: {
					username: "",
					password: ""
				},
				bgurl: bgurl

			}
		},
		created() {

		},
		methods: {
			login() {
				if(this.form.username == "") {

					this.$message({
						showClose: true,
						message: '请输入用户名'
					});
				} else if(this.form.password == "") {

					this.$message({
						showClose: true,
						message: '请输入密码'
					});

				} else {

					let params = {
						username: this.form.username,
						password: md5(this.form.password)
					};
					let _this = this;
					this.$api.login(params).then(function(res) {
						console.log(res);
						if(res.data.code == '000000') {
							_this.$message({
								message: '登录成功',
								type: 'success'
							});

						   sessionStorage.setItem("username",_this.form.username );
							_this.$router.push('/home/mainText')
						} else {
							_this.$message.error(res.data.msg)
						}

					}).catch(function(err){
						_this.$message.error('登录失败')
					})

				}

			}
		}
	}
</script>

<style lang="less">
	@import url("../../static/icon/iconfont.css");
	#loginPage {
		display: flex;
		flex-direction: column;
		height: 100%;
		.header {
			background-color: #ebebeb;
			height: 60px;
			line-height: 60px;
			.div_left {
				float: left;
				margin-left: 80px;
				height: 60px;
				display: table;
				/*width:60px ;
				height: 60px;*/
				/*img{
					width:100%:
					height:100%;
				}*/
			}
			.div_left img {
				margin-top: 14px;
				height: 35px;
			}
			.div_right {
				float: right;
				margin-right: 80px;
			}
			a {
				text-decoration: none;
				color: black;
			}
		}
		.main {
			flex: 1;
			color: white;
			position: relative;
			/*background: url(../../static/img/login.jpg) no-repeat center;*/
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		.login_box {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 400px;
			width: 600px;
			margin: auto;
			/*border: 1px solid #ccc;*/
		}
		.title {
			font-size: 35px;
			letter-spacing: 15px;
			padding: 20px 0 10px 0;
		}
		.sec1 span {
			padding: 0 8px;
			letter-spacing: 5px;
		}
		.div_form {
			padding: 15px;
			margin-top: 50px;
			width: 200px;
			height: 230px;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.input_box {
			position: relative;
			padding-bottom: 15px;
			input {
				display: inline-block;
				width: 170px;
				border-radius: 10px;
				height: 30px;
				border: 1px solid #ccc;
				outline: none;
				padding-left: 27px;
				font-size: 12px;
				background-color: transparent;
				color: inherit;
			}
		}
		.login {
			width: 170px;
			height: 30px;
			line-height: 30px;
			/*border: 1px solid #ccc;*/
			border: 0;
			text-align: center;
			background-color: #FBB03B;
			border-radius: 10px;
			outline: none;
			font-size: 14px;
			color: white;
			margin-top: 10px;
		}
		.username_icon {
			position: absolute;
			top: 3px;
			left: 5px;
			font-size: 20px;
			color: white;
		}
		.password_icon {
			position: absolute;
			top: 4px;
			left: 5px;
			font-size: 20px;
			color: white;
		}
	}
</style>
